<template>
  <view class="">
    <view class="ulCommentL">
      <view class="ul2" v-for="(item) in dataList" :key="item.id"
        @click="toPage(`server/hospital?id=${item.id}`,false)">
        <view class="content">
          <view class="content-left">
            <lazyLoad :src="item.imgUrl" width="264rpx" height="198rpx" borderRadius="12rpx"></lazyLoad>
          </view>
          <view class="content-right">
            <!-- 医院名称 -->
            <view class="content-right-one">
              <text class="hosName multi-ellipsis-1">{{ item.name }}</text>
              <text class="score">{{ item.stars.toFixed(1) }}分</text>
            </view>
            <!-- 医院标签 -->
            <view class="tagList">
              <view class="tagS tagS1" v-show="item.hospitalTypeName">{{ item.hospitalTypeName }}</view>
              <view class="tagS tagS2" v-show="item.hospitalLevelName">{{ item.hospitalLevelName }}</view>
              <view class="tagS tagS3" v-if="item.tags && item.tags.split(',')[0]">{{ item.tags.split(',')[0] }}</view>
            </view>
            <!-- 位置 时间 -->
            <view class="time">
              <text class="f24 iconfont icon-hospital_time"></text>
              <text class="time_t">营业 09:00-18:30</text>
            </view>
            <view class="address">
              <view class="address_disance" v-if="item.distance">
                <text class="mr10 f24 iconfont icon-hospital_location"></text>
                <text>距您{{ item.distance.toFixed(1) }}km</text>
              </view>
              <view class="address_nav" @click.stop="openMap(item.longitude, item.latitude, item.name)">
                <text class="bg f24 iconfont icon-a-hospnav"></text>
                <text>导航去</text>
              </view>
            </view>
          </view>
        </view>
        <view class="content_center">
          <view class="hosTags" v-if="item.productCatalog && item.productCatalog.length">
            <view class="hosTags-item" v-for="(tag,index) in item.productCatalog" :key="index">{{ tag.name }}</view>
          </view>
        </view>
        <view class="content_bottom" v-if="item.hospitalProduct[0]">
          <view class="content_bottom_top multi-ellipsis-1">
            <text>{{ item.hospitalProduct[0].productName }}</text>
          </view>
          <view class="content_bottom_price">
            <view>
              <text class="textOne"><text class="p">¥</text>{{ item.hospitalProduct[0].price }}</text>
              <text class="textTwo">¥{{ item.hospitalProduct[0].originalPrice }}</text>
            </view>
            <view>
              <text class="textThree">累计销售量</text>
              <text class="textFour">{{ item.hospitalProduct[0].salesVolume }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  mapState
} from 'vuex';
import pageMixin from '@/mixins/pageMixin';
import lazyLoad from '@/components/muqian-lazyLoad/muqian-lazyLoad.vue';
export default {
  mixins: [pageMixin],
  components: {
    lazyLoad
  },
  data () {
    return {
      tagStyle: {
        fontSize: '24rpx',
        display: 'inline-block',
        color: '#1a1a1a',
        background: '#f5f5f5',
        borderRadius: '6rpx',
        padding: '8rpx 24rpx',
        lineHeight: '24rpx'
      },
    };
  },
  props: ['dataList'],
};
</script>

<style lang="scss" scoped>
.ulCommentL {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ul2 {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  margin-bottom: 16rpx;

  .content {
    display: flex;
    .content-left {
      width: 264rpx;
      height: 198rpx;
      border-radius: 12rpx;
      overflow: hidden;
    }

    .content-right {
      margin-left: 15rpx;
      flex: 1;

      .content-right-one {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;
        .hosName {
          flex: 1;
          font-weight: 500;
          color: #1a1a1a;
          font-size: 32rpx;
        }
        .score {
          min-width: 70rpx;
          font-size: 24rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ff870f;
          line-height: 24rpx;
          text-align: right;
        }
      }

      .time {
        margin-top: 20rpx;
        display: flex;
        align-items: center;
        &_t {
          margin-left: 13rpx;
          color: #999999;
          font-size: 24rpx;
          line-height: 24rpx;
        }
      }
      .address {
        margin-top: 20rpx;
        font-size: 24rpx;
        line-height: 24rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .bg {
          margin-right: 6rpx;
          color: #FF5900;
        }
        .mr10 {
          margin-right: 10rpx;
        }
        &_disance {
          color: #999999;
        }
        &_nav {
          color: #FF5900;
        }
      }
    }
    .tagList {
      display: flex;
    }
    .tagS {
      border-radius: 6rpx;
      padding: 7rpx 13rpx;
      font-size: 22rpx;
      font-weight: 500;
      line-height: 22rpx;
      margin-right: 12rpx;
      &:last-child {
        margin-right: 0;
      }
    }

    .tagS1 {
      color: rgba(92, 140, 255, 1);
      background-color: rgba(92, 140, 255, 0.1);
    }

    .tagS2 {
      color: #FF5900;
      background-color: rgba(1, 188, 141, 0.1);
    }
    .tagS3 {
      color: #ff870f;
      background-color: rgba(#ff870f, 0.1);
    }
  }

  .content_center {
    margin-top: 20rpx;
    .hosTags {
      width: 100%;
      white-space: nowrap;
      overflow-x: scroll;
      &-item {
        display: inline-block;
        margin-right: 12rpx;
        background: #f5f5f5;
        border-radius: 6rpx;
        padding: 8rpx 24rpx;
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #1a1a1a;
        line-height: 24rpx;
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }

  .content_bottom {
    margin-top: 20rpx;
    background: #f5f5f5;
    border-radius: 12rpx;
    padding: 24rpx;
  }

  .content_bottom_top {
    font-weight: 400;
    color: #1a1a1a;
    line-height: 28rpx;
    height: 28rpx;
    font-size: 28rpx;
  }

  .content_bottom_price {
    margin-top: 10rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15rpx 0 0 0;

    .textOne {
      font-weight: 500;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #ff473d;
      line-height: 32rpx;
      font-size: 32rpx;
      .p {
        font-weight: 400;
        font-size: 24rpx;
        line-height: 24rpx;
      }
    }

    .textTwo {
      display: inline-block;
      margin-left: 16rpx;
      color: #999999;
      font-size: 24rpx;
      line-height: 24rpx;
      font-weight: 400;
      text-decoration: line-through;
    }

    .textThree {
      font-weight: 400;
      color: #999999;
      line-height: 24px;
      font-size: 24rpx;
    }

    .textFour {
      font-weight: 400;
      color: #999999;
      line-height: 24px;
      padding-left: 10rpx;
      font-size: 24rpx;
    }
  }
}
.f24 {
  font-size: 24rpx;
  color: #cccccc;
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all; /*允许在单词内换行,防止有字母时候出问题*/
  display: -webkit-box; /*将对象作为弹性伸缩盒子模型显示*/
  -webkit-line-clamp: 1; /*多行在这里修改数字即可*/
  -webkit-box-orient: vertical; /*从上到下垂直排列子元素*/
}
</style>
